/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form, Input,  Radio, Select,Upload,Button ,Icon,TreeSelect } from 'antd';
import {connect} from 'dva';
import request from "@/utils/request";
const TreeNode = TreeSelect.TreeNode;
const Option = Select.Option;
const FormItem = Form.Item;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
      data:[]
    };
  }
  componentDidMount() {
    this.fetch(sessionStorage.getItem('company_id'))
  }
  fetch=(company_id,clear)=>{
    const that=this;
    request(`/all_regions`,{
      method:'GET',
      params:{
        company_id:company_id
      }
    }).then((response)=>{
      if(response.status===200){
        if(clear){
          that.props.form.setFieldsValue({
            parent_id:'',
          })
        }
        that.setState({
          data:response.data.data
        })
      }

    });
  }
  renderTreeNodes=(data)=>{
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode  value={`${item.id}$${item.name}`} title={item.name} key={item.id} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return  <TreeNode value={item.id}  title={item.name} key={item.id} />
    });
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };

    const {getFieldDecorator} = this.props.form;
    const data=this.state.data
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <Form.Item  label="所属分站"
                     {...formItemLayoutWithLabel}
          >
            {getFieldDecorator('company_id', {
              initialValue: this.props.editRecord?this.props.editRecord.company_id:sessionStorage.getItem('company_id'),
              rules: [{required: true, message:'所属分站不能为空'}],
            })(
              <Select onChange={(value)=>{
                this.fetch(value,1)
              }} disabled={Boolean(sessionStorage.getItem('company_id'))||this.props.editRecord} placeholder="请选择">
                {
                  JSON.parse(sessionStorage.getItem('management_companies')).map((item,index)=>{
                    return <Option key={index} value={item.id}>
                      {item.name}
                    </Option>
                  })
                }
              </Select>,
            )}
          </Form.Item>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
             区域名称
            </span>
            )}
          >
            {getFieldDecorator('name', {
              initialValue: this.props.editRecord ? this.props.editRecord.name : '',
              rules: [{required: true, message:'区域名称不能为空'}],
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
            所属片区
            </span>
            )}
          >
            {getFieldDecorator('area', {
              initialValue: this.props.editRecord ? this.props.editRecord.area : '',
            })(
              <Select >
                <Option value={'A片区'}>A片区</Option>
                <Option value={'B片区'}>B片区</Option>
                <Option value={'C片区'}>C片区</Option>
                <Option value={'D片区'}>D片区</Option>
              </Select>
            )}
          </FormItem>
          {
            !this.props.editRecord&&
            <FormItem
              {...formItemLayoutWithLabel}
              label={(
                <span>
             上级区域
            </span>
              )}>
              {getFieldDecorator('parent_id', {
                initialValue: this.props.editRecord?this.props.editRecord.parent_id:'',
              })(
                <TreeSelect
                  treeDefaultExpandAll
                  allowClear
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  showSearch
                >
                  {this.renderTreeNodes(data)}
                </TreeSelect>
              )}
            </FormItem>
          }
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
              备注
            </span>
            )}
          >
            {getFieldDecorator('remark', {
              initialValue: this.props.editRecord ? this.props.editRecord.remark : '',
            })(
              <Input />
            )}
          </FormItem>
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
